<template>
    <article class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> households指数</header>
            <div class="chartBox clearfix">
                <article>
                    <div class="regionType-button clearfix" v-show="!Households_chartNoDataShow">
                        <el-button-group>
                            <el-button type="primary" v-for="(item, key, index) in HouseholdsData" :key="index" v-if="item" size="mini" @click="regionTypeChange(key)">{{regionTranslation(key)}}</el-button>
                        </el-button-group>
                    </div>
                    <div class="chart-div" id="Households-chart" v-show="!Households_chartNoDataShow" style="height: 280px;"></div>
                    <div class="chart-div" id="AVHR-chart" v-show="!AVHR_chartNoDataShow" style="height: 280px;"></div>
                    <p>{{ regionName }}总家庭数量：{{this.$accounting.formatMoney(total, "", 0)}}户，住户的平均住宅建造年份：{{yearBuilt}}年，一个家庭住在住宅里的平均时间为：{{duration}}年。</p>
                </article>
                <h4 v-show="Households_chartNoDataShow">暂未查询到数据！</h4>
                <h4 v-show="AVHR_chartNoDataShow">暂未查询到数据！</h4>
            </div>
            <p v-show="false">{{getHouseholds}}</p>
            <p v-show="false">{{getHousePrice}}</p>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                housePrice: null,//本房源价钱
                HouseholdsData: null,//households数据
                stateHouseholdsData: null,//州——households数据
                cityHouseholdsData: null,//城市——households数据
                zipHouseholdsData: null,//邮编——households数据
                countyHouseholdsData: null,//郡县——households数据
                neighbourhoodHouseholdsData: null,//附近——households数据
                HouseholdsMyEcharts: '',//households——饼图
                regionType: 'state',//地区级别
                total: '',//该地区的总户数
                yearBuilt: '',//住户的平均住宅建造年份
                duration: '',//一个家庭住在住宅里的平均时间为
                regionName: '本州',//地区名称，地区切换时，图表下边的文字说明的地区名称要随着改变

                Households_chartNoDataShow: false, //判断是否有无数据
                AVHR_chartNoDataShow: false, //判断是否有无数据
            }
        },
        computed: {
            getHouseholds() {
                if(this.$store.getters.get_homejunctionData.households){
                    this.HouseholdsData = this.$store.getters.get_homejunctionData.households;
                    this.stateHouseholdsData = this.$store.getters.get_homejunctionData.households.state;
                    this.cityHouseholdsData = this.$store.getters.get_homejunctionData.households.city;
                    this.zipHouseholdsData = this.$store.getters.get_homejunctionData.households.zip;
                    this.countyHouseholdsData = this.$store.getters.get_homejunctionData.households.county;
                    this.neighbourhoodHouseholdsData = this.$store.getters.get_homejunctionData.households.neighbourhood;

                    this.$nextTick(() => {
                        this.HouseholdsMyEcharts = echarts.getInstanceByDom(document.getElementById('Households-chart'));
                        if (this.HouseholdsMyEcharts === undefined) {
                            this.HouseholdsMyEcharts = echarts.init(document.getElementById('Households-chart'));
                        }
                        this.HouseholdsMyEcharts.showLoading();

                        this.AVHREcharts = echarts.getInstanceByDom(document.getElementById('AVHR-chart'));
                        if (this.AVHREcharts === undefined) {
                            this.AVHREcharts = echarts.init(document.getElementById('AVHR-chart'));
                        }
                        this.AVHREcharts.showLoading();

                        window.addEventListener('resize', () => {
                            this.HouseholdsMyEcharts.resize();
                            this.AVHREcharts.resize();
                        });

                        this.get_Households();
                    })
                }
                return this.$store.getters.get_homejunctionData.households
            },
            getHousePrice() {
                if(this.$store.getters.get_housePrice){
                    this.housePrice = this.$store.getters.get_housePrice;
                }
                return this.$store.getters.get_housePrice
            },
        },
        created() {
        },
        mounted() {

        },
        beforeDestroy () {
            if(this.HouseholdsMyEcharts || this.AVHREcharts){
                this.HouseholdsMyEcharts.dispose();
                this.AVHREcharts.dispose();
            }
        },
        methods: {
            //获取households数据
            get_Households() {
                if(this.HouseholdsData){
                    this.Households_chartNoDataShow = false;
                    this.Households_charts(this.stateHouseholdsData.occupancy.children, this.stateHouseholdsData.occupancy.families, this.stateHouseholdsData.occupancy.married, this.stateHouseholdsData.occupancy.owned, this.stateHouseholdsData.occupancy.rented, this.stateHouseholdsData.occupancy.vacant);
                    this.yearBuilt = this.stateHouseholdsData.yearBuilt;//住户的平均住宅建造年份
                    this.duration = this.stateHouseholdsData.duration;//一个家庭住在住宅里的平均时间为
                }else{
                    this.Households_chartNoDataShow = true;
                }

                //判断对象是否为空
                if(Object.keys(this.stateHouseholdsData).length == 0 && Object.keys(this.cityHouseholdsData).length == 0 &&
                    Object.keys(this.zipHouseholdsData).length == 0 && Object.keys(this.housePrice).length == 0){
                    this.AVHR_chartNoDataShow = true;
                }else{
                    this.AVHR_chartNoDataShow = false;
                    this.AVHR_charts(
                        this.stateHouseholdsData ? this.stateHouseholdsData.value : 0,
                        this.cityHouseholdsData ? this.cityHouseholdsData.value : 0,
                        this.zipHouseholdsData ? this.zipHouseholdsData.value : 0,
                        this.housePrice ? this.housePrice : 0
                    );
                }


            },
            //地区级别Change事件
            regionTypeChange(value){
                if (value == 'state') {
                    this.Households_charts(this.stateHouseholdsData.occupancy.children, this.stateHouseholdsData.occupancy.families, this.stateHouseholdsData.occupancy.married, this.stateHouseholdsData.occupancy.owned, this.stateHouseholdsData.occupancy.rented, this.stateHouseholdsData.occupancy.vacant);
                    this.total = this.stateHouseholdsData.total;//该地区的总户数
                    this.yearBuilt = this.stateHouseholdsData.yearBuilt;//住户的平均住宅建造年份
                    this.duration = this.stateHouseholdsData.duration;//一个家庭住在住宅里的平均时间为
                    this.regionName = '本州';
                }else if (value == 'city') {
                    this.Households_charts(this.cityHouseholdsData.occupancy.children, this.cityHouseholdsData.occupancy.families, this.cityHouseholdsData.occupancy.married, this.cityHouseholdsData.occupancy.owned, this.cityHouseholdsData.occupancy.rented, this.cityHouseholdsData.occupancy.vacant);
                    this.total = this.cityHouseholdsData.total;//该地区的总户数
                    this.yearBuilt = this.cityHouseholdsData.yearBuilt;//住户的平均住宅建造年份
                    this.duration = this.cityHouseholdsData.duration;//一个家庭住在住宅里的平均时间为
                    this.regionName = '本市';
                }else if (value == 'zip') {
                    this.Households_charts(this.zipHouseholdsData.occupancy.children, this.zipHouseholdsData.occupancy.families, this.zipHouseholdsData.occupancy.married, this.zipHouseholdsData.occupancy.owned, this.zipHouseholdsData.occupancy.rented, this.zipHouseholdsData.occupancy.vacant);
                    this.total = this.zipHouseholdsData.total;//该地区的总户数
                    this.yearBuilt = this.zipHouseholdsData.yearBuilt;//住户的平均住宅建造年份
                    this.duration = this.zipHouseholdsData.duration;//一个家庭住在住宅里的平均时间为
                    this.regionName = '本区域';
                }else if (value == 'county') {
                    this.Households_charts(this.countyHouseholdsData.occupancy.children, this.countyHouseholdsData.occupancy.families, this.countyHouseholdsData.occupancy.married, this.countyHouseholdsData.occupancy.owned, this.countyHouseholdsData.occupancy.rented, this.countyHouseholdsData.occupancy.vacant);
                    this.total = this.countyHouseholdsData.total;//该地区的总户数
                    this.yearBuilt = this.countyHouseholdsData.yearBuilt;//住户的平均住宅建造年份
                    this.duration = this.countyHouseholdsData.duration;//一个家庭住在住宅里的平均时间为
                    this.regionName = '本郡县';
                }else if (value == 'neighbourhood') {
                    this.Households_charts(this.neighbourhoodHouseholdsData.occupancy.children, this.neighbourhoodHouseholdsData.occupancy.families, this.neighbourhoodHouseholdsData.occupancy.married, this.neighbourhoodHouseholdsData.occupancy.owned, this.neighbourhoodHouseholdsData.occupancy.rented, this.neighbourhoodHouseholdsData.occupancy.vacant);
                    this.total = this.neighbourhoodHouseholdsData.total;//该地区的总户数
                    this.yearBuilt = this.neighbourhoodHouseholdsData.yearBuilt;//住户的平均住宅建造年份
                    this.duration = this.neighbourhoodHouseholdsData.duration;//一个家庭住在住宅里的平均时间为
                    this.regionName = '本社区';
                }
            },
            //households——柱状图
            Households_charts(children, families, married, owned, rented, vacant) {
                this.HouseholdsMyEcharts.hideLoading();
                this.HouseholdsMyEcharts.setOption({
                    title: {
                        text: 'households指数',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // 控制图表摆放位置
                    grid: {
                        left: '10%',
                    },
                    xAxis: {
                        data: ["有18岁以下儿童的家庭比例", "由家庭组成的家庭比例", "由已婚夫妇组成的家庭的百分比", "拥有住房的家庭比例", "租房家庭的比例", "该地区房屋空置率"],
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696',
                            rotate: '20',
                            fontSize: 10
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: '{value}%'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        type: 'bar',
                        label: {
                            show: true,//柱子上边显示文字标签
                            position: 'top',
                            formatter: param => {
                                return param.value +'%';
                            },
                            offset: [0, -5],
                            fontWeight: 'bold'
                        },
                        data: [
                            {
                                value: children,
                                itemStyle:{
                                    color: '#40c3f9',
                                }
                            },
                            {
                                value: families,
                                itemStyle:{
                                    color: '#ffbf53',
                                }
                            },
                            {
                                value: married,
                                itemStyle:{
                                    color: '#fe5960',
                                }
                            },
                            {
                                value: owned,
                                itemStyle:{
                                    color: '#00bc7b',
                                }
                            },
                            {
                                value: rented,
                                itemStyle:{
                                    color: '#f963a0',
                                }
                            },
                            {
                                value: vacant,
                                itemStyle:{
                                    color: '#4cabce',
                                }
                            },
                        ],
                    }],
                    animationEasing: 'elasticOut',
                });
            },
            //住户居住的平均价值——柱状图
            AVHR_charts(state, city, zip, thisHouse) {
                this.AVHREcharts.hideLoading();
                this.AVHREcharts.setOption({
                    title: {
                        text: '住户居住的平均价值',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    // 控制图表摆放位置
                    grid: {
                        left: '15%',
                    },
                    xAxis: {
                        data: ["本州", "本城市", "本区域", "本房源"],
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: value => {
                                let KM = '';
                                if(value.toString().length >= 7){
                                    KM = (value/1000000).toFixed(1) +'M'
                                }else{
                                    KM = Math.round(value/1000) +'k'
                                }
                                return '$'+ KM;
                            },
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        type: 'bar',
                        barWidth: '40',
                        label: {
                            show: true,//柱子上边显示文字标签
                            position: 'top',
                            formatter: param => {
                                return this.$accounting.formatMoney(param.value, "$", 0);
                            },
                            offset: [0, -5],
                            fontWeight: 'bold'
                        },
                        data: [
                            {
                                value: state,
                                itemStyle:{
                                    color: '#40c3f9',
                                }
                            },
                            {
                                value: city,
                                itemStyle:{
                                    color: '#ffbf53',
                                }
                            },
                            {
                                value: zip,
                                itemStyle:{
                                    color: '#fe5960',
                                }
                            },
                            {
                                value: thisHouse,
                                itemStyle:{
                                    color: '#00bc7b',
                                }
                            },
                        ],
                    }],
                    animationEasing: 'elasticOut',
                });
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
</style>
